<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- production version, optimized for size and speed -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<script>

</script>

<body>
    <my-component class="baz boo"></my-component>

    <p class="foo bar baz boo">Hi</p>

    <my-component v-bind:class="{ active: isActive }">
    </my-component>

    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">

    </div>

    <div v-bind:style="styleObject"></div>

    <div v-bind:style="[baseStyles, overridingStyles]"></div>
    
    <script>
        Vue.component('my-component', {
            template: '<p class="foo bar">Hi</p>',

            data: {
                activeColor: 'red',
                fontSize: 30
            },

            data: {
                styleObject: {
                    color: 'red',
                    fontSize: '13px'
                }
            }
        })


    </script>


</body>

</html>